<template>
  <section>
    <el-form label-width="40px" inline size="mini">
      <el-form-item label="标题" class="item">
        <el-input size="mini" v-model="inboundForm.title" style="width: 100%"></el-input>
      </el-form-item>
      <el-form-item label="类型" class="item">
        <el-select size="mini" v-model="inboundForm.stockInTypeCode">
          <el-option v-for="code in stockInTypes" :key="code.id" :value="code.code" :label="code.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="仓库" class="item">
        <el-select size="mini" v-model="inboundForm.warehouseId">
          <el-option v-for="warehouse in warehouseList" :key="warehouse.id" :value="warehouse.id" :label="warehouse.name"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="inboundItems">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="产品" prop="title">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.title"></el-input>
          <span v-else>{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column label="规格" prop="data.props">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.data.props"></el-input>
          <span v-else>{{scope.row.data.props}}</span>
        </template>
      </el-table-column>
      <el-table-column label="sn" prop="sn">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.sn"></el-input>
          <span v-else>{{scope.row.sn}}</span>
        </template>
      </el-table-column>
      <el-table-column label="单位" prop="unit">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.data.unit"></el-input>
          <span v-else>{{scope.row.data.unit}}</span>
        </template>
      </el-table-column>
      <el-table-column label="数量" prop="num">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.num"></el-input>
          <span v-else>{{scope.row.num}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <i :class="scope.row.edit?'el-icon-check':'el-icon-edit'" @click="scope.row.edit =!scope.row.edit" style="color:blue"/>
          <i class="el-icon-close" @click="delBtn(scope.$index)" style="color:red"/>
        </template>
      </el-table-column>
    </el-table>
    <div class="btnBox">
      <el-button size="mini" class="el-icon-plus" @click="addBtn"></el-button>
      <el-button size="mini" type="primary" @click="saveBtn">保存</el-button>
    </div>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "inbound-job",
    props:['itemlist'],
    data(){
      return{
        stockInTypes:[],
        inboundForm:{
          title:'',stockInTypeCode:null,departmentId:null,warehouseId:null,data:{}
        },
        inboundItems:[],
        warehouseList:[]
      }
    },
    watch:{
      itemlist(nv,ov){
        console.log('少一个就不变了？？？',nv)
        if(nv) this.init(nv)
      }
    },
    computed: {
      ...mapGetters(['department']),
    },
    created(){
      console.log('不观测？？？？',this.itemlist)
      this.init(this.itemlist)
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      init(nv){
        this.inboundItems=[]
        this.inboundForm.departmentId=this.department.id
        this.inboundForm.data={
          department:{id:this.department.id,name:this.department.name},
          company:{id:this.department.companyId,name:this.department.companyName},
        }
        this.getStockInTypes()
        this.getWarehouseList()
        if(nv){
          this.initInboundItems(nv)
        }else {

        }
      },
      getStockInTypes(){
        this.fetch({name:"getStockInTypes"})
          .then(res=>{
            // console.log(res)
            this.stockInTypes=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getWarehouseList(){
        this.fetch({name:"getWarehouseList"})
          .then(res=>{
            console.log('仓库列表-----',res)
            this.warehouseList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      initInboundItems(array){
        for(let i=0;i<array.length;i++){
          let a=array[i]
        }
        array.forEach(a=>{
          a.specs.forEach(s=>{
            let index=this.inboundItems.findIndex(i=>i.sn === s.sn)
            if(index<0){
              let tmp={
                title:a.name,
                sn:s.sn,
                data:{props:s.props,...a.data,unit:s.data.unit},
                edit:false
              }
              this.inboundItems.push(tmp)
            }
          })
        })
        console.log('所有产品都导入好了------',this.inboundItems)
      },
      delBtn(index){
        this.$confirm('确认删除？')
          .then(()=> {
            this.inboundItems.splice(index,1)
          })
          .catch(() => {
            this.$message({type: 'info',message: '已取消删除'})
            this.loading = false
          })
      },
      addBtn(){
        this.inboundItems.push({
          title:'',data:{props:''},sn:'',unit:'',num:'',edit:true
        })
      },
      saveBtn(){
        console.log('新建入任务----------',this.inboundForm,this.inboundItems)
        this.$confirm('保存后不许修改，确认保存？')
          .then(()=> {
            let godownEntryItems=JSON.stringify(this.inboundItems)
            this.inboundForm.godownEntryItems=godownEntryItems
            console.log('整一个参数---------',this.inboundForm)
            // return
            this.fetch({name:"createStockInTask",data:this.inboundForm})
              .then(res=>{
                console.log('创建入库任务成功-----',res)
                this.$message({type: 'success',message: '创建成功'})
                this.$emit('successEvent')
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      }
    }
  }
</script>

<style scoped>
  .item{
    border: 0px solid red;
    width: 45%;
  }
  .btnBox{
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
</style>
